<!-- 设计作品详情--用户浏览的界面 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE>
<html>

<head>
<meta charset="utf-8">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/header_changeLi.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/jquery-ui.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/changeA.js"></script>
<script src="${pageContext.request.contextPath}/js/common/page_match.js"></script>
<script src="${pageContext.request.contextPath}/js/common/words_deal.js"></script>
<script
	src="${pageContext.request.contextPath}/js/common/changPicture.js"></script>
<script src="${pageContext.request.contextPath}/js/common/liked_coll.js"></script>
<script
	src="${pageContext.request.contextPath}/js/common/flickity-docs.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/jquery.slider.js"></script>
<link rel='stylesheet prefetch'
	href='${pageContext.request.contextPath}/css/common/main_head.css'>
<link rel='stylesheet prefetch'
	href='${pageContext.request.contextPath}/css/common/changPicture.css'>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/common/font-awesome.min.css">
<link rel='stylesheet prefetch'
	href='${pageContext.request.contextPath}/css/bootstrap/bootstrap.min.css'>
<link rel='stylesheet prefetch'
	href='${pageContext.request.contextPath}/css/designer/main.css'>
<link rel='stylesheet prefetch'
	href='${pageContext.request.contextPath}/css/common/flickity-docs.css'>
<link rel='stylesheet prefetch'
	href='${pageContext.request.contextPath}/css/common/tabe.min.css'>
<link
	href="${pageContext.request.contextPath}/css/bootstrap/bootstrap-combined.min.css"
	rel="stylesheet" media="screen">
<link href="${pageContext.request.contextPath}/css/common/page.css"
	rel="stylesheet">
<link rel='stylesheet prefetch'
	href='${pageContext.request.contextPath}/css/designer/want_buy.css'>
<title></title>
</head>

<body>
	<header>
		<div class="rightTop">
			<ul>
				<li><a href="#">登录</a></li>
				<li class="separator">|</li>
				<li><a href="#">注册</a></li>
				<li class="separator">|</li>
				<li><a href="login.html">个人中心</a></li>
			</ul>
		</div>
		<div class="headermenu">
			<ul>
				<li><a href="#">首页</a></li>
				<li class="selectedLi"><a href="#" class="selectA">作品</a></li>
				<li><a href="#">设计师</a></li>
				<li><a href="#">品牌服装</a></li>
				<li><a href="#">服装企业</a></li>
				<li><a href="#">面料</a></li>
				<li><a href="#">供应商</a></li>
				<li><a href="#">资讯</a></li>
			</ul>
		</div>
		<div class="search">
			<input type="text" placeholder="我想找···" />
		</div>
	</header>
	<div class="con">

		<!--轮播图显示-->
		<div id="pagebody">
			<span class="c_title">FCS > 作品 </span>
			<div id="sidebar">
				<!--左边-->
				<div class="barleft">
					<span class="bartitle">所有类别:</span>
					<c:forEach items="${json.list }" var="data">
						<div class="selectbox">
							<a class="selbtn" href="javaScript:;">${data.parend_code }</a>
							<!--服装大类，如男装-->
							<ul class="selbody">
								<c:forEach items="${design_class}" var="design_class">
									<li>${design_class.name }</li>
									<!-- 服装小类，如上衣 -->
								</c:forEach>
							</ul>
						</div>
					</c:forEach>
				</div>
				<!--中间-->
				<div class="main">
					<div class="gallery">
						<div class="content-wrap">
							<div class="example duo">
								<div class="example__demo duo__cell">
									<div class="gallery js-flickity"
										data-flickity-options='{ "wrapAround": true }'>

										<c:if test="${design.effect_url!=null}">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.effect_url}"
													alt=""></a>
											</div>
										</c:if>

										<c:if test="${design.garment_fashion_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.garment_fashion_url}"
													alt=""></a>
											</div>
										</c:if>
										<c:if test="${design.artwork_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.artwork_url}"
													alt=""></a>
											</div>
										</c:if>
										<c:if test="${design.fabrics_pic_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.fabrics_pic_url}"
													alt=""></a>
											</div>
										</c:if>
										<c:if test="${design.clothes_pic_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.clothes_pic_url}"
													alt=""></a>
											</div>
										</c:if>
										<c:if test="${design.other_pic_url!=null }">
											<div class="gallery-cell">
												<a href="#"><img
													src="${pageContext.request.contextPath}/${design.other_pic_url}"
													alt=""></a>
											</div>
										</c:if>

									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="detailed">
						<h4>详细信息</h4>
						<table>
							<tr>
								<td width="58px">名称:</td>
								<td>${design.name}</td>
							</tr>
							<tr>
								<td>专辑:</td>
								<td>${design.special.name}</td>
							</tr>
							<tr>
								<td>分类:</td>
								<td>${design_class.name}</td>
							</tr>
							<tr>
								<td>风格:</td>
								<td>${design_style.value}</td>
							</tr>
							<tr>
								<td>款式:</td>
								<td>${design_pattern.name}</td>
							</tr>
							<tr>
								<td>喜欢人数:</td>
								<td>${design.liked}</td>
							</tr>
							<tr>
								<td>收藏人数:</td>
								<td>${design.collected}</td>
							</tr>
							<span class="intro">简介:</span>
							<p class="intro introText">${design.description}</p>
						</table>
					</div>

					<div class="allbtn">
						<a class="addHref" href="javaScript:;">想买<span
							class="saddHref"></span></a> <a class="liked" href="javaScript:;">喜欢(<span
							class="sliked">${design.liked}</span>)
						</a> <a class="coll" href="javaScript:;">收藏(<span class="scoll">${design.collected }</span>)
						</a>
					</div>
					<!--新增专辑弹出框-->
					<div class="hide-body" style="width: 352px;height: 419px;">
						<div class="close-window">
							<!-- 关闭窗口，也就是触发关闭div的事件-->
							<a href="javascript:;" title="关闭" class="close">×</a>
							<h4>填写购买信息</h4>
						</div>
						<!-- 中间主体显示div 可以增加其他的样式-->
						<div class="login-body dform">
							<form class="signin" name="loginform" action="" method="post">
								<ol>
									<li><label for="username">请选择购买性质：</label> 
									<select class="selectWay">
											<option value="ZD006001">企业购买版权</option>
											<option value="ZD006002">个人购买版权</option>
											<option value="ZD006003">兼职/全职聘用</option>
									</select></li>
									<li><label for="buyer_name">请输入您的用户名：</label> <input
										class="buyer_name" id="buyer_name" type="text" size="29" /></li>
									<li><label for="phone">请输入您的联系电话：</label> <input
										class="phone" id="phone" type="text" size="29" /></li>
									<li><label for="TextArea_want">相对卖家说：</label> <textarea
											class="remark" rows="3" cols="20" id="TextArea_want"
											onkeyup="words_deal_want();"></textarea> 还可输入<span
										id="textCount_want">100</span>个字</li>
									<li><input id="add" class="btn btn-primary addbtn"
										type="button" name="submit" value="确定 " /> <input
										type="hidden" id="designer_id" value="${designer_id }">
									</li>
								</ol>
							</form>
						</div>
					</div>
					<div class="body-color"></div>
					<!--新增专辑弹出框结束-->

				</div>
				<!--右边-->
				<div class="posts">
					<span class="bartitle">设计师信息:</span> <img
						src="${pageContext.request.contextPath}/${designerInfo.photo_link}">
					<table>
						<tr>
							<td>姓名:</td>
							<td>${designerInfo.name}</td>
						</tr>
						<tr>
							<td>设计标签:</td>
							<c:if test="${designerLabels!=null}">
								<c:forEach var="designerLabel" items="${designerLabels}">
									<td>${designerLabel.dictionary.value}</td>
								</c:forEach>
							</c:if>

						</tr>
						<tr>
							<td>从业经历:</td>
							<td>${designerInfo.experience}</td>
						</tr>
					</table>
				</div>
			</div>


			<div id="mainbody">
				<div class="span9" id="span9left"
					style="margin-left: 0px; width: 100% !important;">
					<ul id="myTab" class="nav nav-tabs">
						<li class="active"><a href="#match" data-toggle="tab">相关</a></li>
						<li><a href="#comment" data-toggle="tab" id="clickBrand">评论</a></li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div class="tab-pane fade in active" id="match">
							<div class="design" style="height: 181px;">
								<div class="special">
									<a>相似作品</a>
								</div>
								<div class="slider-box slider-box1">
									<a href='javascript:;'
										class="slider-prev slider-btn slider-prev1"></a>
									<div class="slider-wrapper slider-wrapper1">
										<ul class='slider-move slider-move1'>
											<c:forEach items="${similarDesign}" var="similarDesign">
												<li><img
													src="${pageContext.request.contextPath}/${similarDesign.effect_url}">
												</li>
											</c:forEach>
										</ul>
									</div>
									<a href='javascript:;'
										class="slider-next slider-btn slider-next1"></a>
								</div>
							</div>

							<div class="fabric" style="height: 181px;">
								<div class="special2">
									<a>匹配面料</a>
								</div>
								<div class="slider-box slider-box2">
									<a href='javascript:;'
										class="slider-prev slider-btn slider-prev2"></a>
									<div class="slider-wrapper slider-wrapper2">
										<ul class='slider-move slider-move2'>
											<c:forEach items="${fabrics}" var="fabrics">
												<li><img
													src="${pageContext.request.contextPath}/${fabrics.photo_url1}">
												</li>
											</c:forEach>
										</ul>
									</div>
									<a href='javascript:;'
										class="slider-next slider-btn slider-next2"></a>
								</div>
							</div>
							<div class="design" style="height: 181px;">
								<div class="special">
									<a>匹配服装</a>
								</div>
								<div class="slider-box slider-box3">
									<a href='javascript:;'
										class="slider-prev slider-btn slider-prev3"></a>
									<div class="slider-wrapper slider-wrapper3">
										<ul class='slider-move slider-move3'>
											<c:forEach items="${clothings}" var="clothings">
												<li><img
													src="${pageContext.request.contextPath}/${clothings.photo_url1}">
												</li>
											</c:forEach>
										</ul>
									</div>
									<a href='javascript:;'
										class="slider-next slider-btn slider-next3"></a>
								</div>
							</div>

						</div>

						<div class="tab-pane fade" id="comment">
							<div class="content-form">
								<div id="ping">
									<div class="tech-news-grids">
										<c:forEach items="${comments}" var="comments">
											<!--4条记录-->
											<div class="tech-news-grid span_66">
												<img style="width: 20px; height: 20px;" src="" />
												${comments.user.username}：
												<!--用户名-->
												<p>${comments.content}</p>
												<!--评论内容-->
											</div>
										</c:forEach>
										<div class="clearfix"></div>

									</div>
									<!--分页-->
									<div class="paging">
										<div style="display: none;">
											<span class="pages">${data.property.pageCount}</span>
											<!--页数-->
											<span class="pageIndex">${pageindex}</span>
											<!--当前页码-->
											<span class="pagesize">3</span>
											<!--每页记录数-->
											<span class="hasNext">${data.property.hasNext}</span>
											<!--是否有下一页(boolean)-->
											<span class="likedUrl">/liked/liked_obj.do</span>
											<!--liked请求action-->
											<span class="collectionUrl">/collection/collect_obj.do</span>
											<!--collection请求action-->
											<span class="demandUrl">/demand/add_demand.do</span>
											<!--demand请求action-->
											<span class="userId">${user_id}</span>
											<!--用户ID-->
											<span class="object_id">${design.id}</span>
											<!--商品ID-->
											<span class="object_type">1</span>
											<!--商品类型-->
											<span class="commonUrl">${pageContext.request.contextPath}</span>
											<!--绝对路径-->
										</div>
										<div class="showPaging">
											<a class="prev"
												href="${pageContext.request.contextPath}/demand/getSpecial.do?designer_id=${designer_id }&pageindex=${json.property.pageIndex-1 }&pagesize=4">
												上一页</a> <select class="pageNum">
												<option value="0">请选择跳转的页数</option>
												<option value="1">第1页</option>
											</select> <a class="next"
												href="${pageContext.request.contextPath}/demand/getSpecial.do?designer_id=${designer_id }&pageindex=${json.property.pageIndex+1 }&pagesize=4">
												下一页</a>
										</div>
									</div>
									<!--分页结束-->

									<form>
										<textarea name="textarea" id="TextArea" cols="45" rows="5"
											onkeyup="words_deal();" placeholder="在此发表您的看法"></textarea>
										<div class="leave">
											还可输入<span id="textCount">100</span>个字
										</div>
										<input type="button" value="发表" class="view" />
									</form>
								</div>
							</div>
						</div>
					</div>

					<script>
						$(function() {
							$('a[data-toggle="tab"]').on(
									'shown.bs.tab',
									function(e) {
										// 获取已激活的标签页的名称
										var activeTab = $(e.target).text();
										// 获取前一个激活的标签页的名称
										var previousTab = $(e.relatedTarget)
												.text();
										$(".active-tab span").html(activeTab);
										$(".previous-tab span").html(
												previousTab);
									});
						});
					</script>
				</div>
			</div>
		</div>

	</div>
</body>

</html>
